<template>
  <div>
    <h1>App</h1>
    <ul>
      <li>
        <RouterLink to="/home">Home</RouterLink>
      </li>
      <li>
        <RouterLink to="/shop/100/list/20?name=jack&age=20">/shop/100/list/20?name=jack&age=20
        </RouterLink>
      </li>
      <li>
        <RouterLink to="/shop/200/list/10">/shop/200/list/10</RouterLink>
      </li>
    </ul>

    {{ $route.params }}-{{ $route.query }}
    <hr>
    {{ route.params }}-{{ route.query }}

    <hr>
    <button @click="getParams">params</button>
    <RouterView></RouterView>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
// hook函数，一般是use前缀
const route = useRoute();//route===$route 

const getParams = () => {
  console.log(route.params);
};
</script>

<style>
div {
  border: solid;
  padding: 10px;
}
</style>